<template>
  <div class="container">
    <h1 class="topTitle">飞线图</h1>
    <div style="height: 600px; width: 100%">
      <l-map class="map" ref="map" :options="mapOptions" @ready="doSomethingOnReady()">
         <l-tile-layer :url="mapOptions.url"></l-tile-layer>
        <l-control-zoom position="topleft" zoom-in-title="放大" zoom-out-title="缩小"></l-control-zoom>
      </l-map>
    </div>
  </div>
</template>

<script>

  import * as L from "leaflet";

  export default {
  name: "FlyLayerPage",
  components: {
  },
  data() {
    return {
      map:null,
      //地图参数
      mapOptions:{
        attributionControl :false,
        zoomControl:false,
        minZoom: 2,
        maxZoom: 14,
        zoom: 6,
        center: {'lon':116.404,'lat':39.915},
        preferCanvas: true,
        url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
        attribution:  '&copy; WebGis',
      },
      //飞线图
      flyLayer: {
        instance:null,
        flycfg : //飞线图配置
                {
                  pulseRadius: 10,
                  arcWidth: 3,
                  label: true,
                  order: false,
                  /* replacePopover: function (x, y, data, index) {
                       console.log(x, y, data, index, 'show popover');
                       that.popover.innerHTML = '被攻击方:' + data.labels[1] + '<br> 攻击方:' + data.labels[0] + "<br> 次数:" + data.value
                       return that.popover;
                   },
                   onHidePopover: function (index) {
                       console.log('hide popover', index);
                   }*/
                },
        flyData://飞线图数据
                [
                  {
                    "color": "#ff0000",
                    "from": [116.404844, 39.91405],
                    "to": [84.9023, 42.148],
                    "labels": ["北京", "新疆"],
                    "value": 84.9023
                  }, {
                  "color": "green",
                  "from": [116.404844, 39.91405],
                  "to": [87.8695, 31.6846],
                  "labels": ["北京", "西藏"],
                  "value": 87.8695
                }, {
                  "color": "green",
                  "from": [116.404844, 39.91405],
                  "to": [112.5977, 41.3408],
                  "labels": ["北京", "内蒙古"],
                  "value": 112.5977
                }, {
                  "color": "green",
                  "from": [116.404844, 39.91405],
                  "to": [95.2402, 35.4199],
                  "labels": ["北京", "青海"],
                  "value": 95.2402
                }, {
                  "color": "green",
                  "from": [116.404844, 39.91405],
                  "to": [101.9199, 30.1904],
                  "labels": ["北京", "四川"],
                  "value": 1.9199
                }, {
                  "color": "blue",
                  "from": [116.404844, 39.91405],
                  "to": [126.1445, 48.7156],
                  "labels": ["北京", "黑龙江"],
                  "value": 126
                }
                ],
        visible:false
      },
    }
  },
  methods: {
    doSomethingOnReady() {
      this.map = this.$refs.map.mapObject

      this.flyLayer.instance = L.migrationLayer(this.flyLayer.flyData.map(i => Object.assign(i, {  })), this.flyLayer.flycfg);
      this.flyLayer.instance.addTo(this.$refs.map.mapObject);//添加到地图上
    },
  },
}
</script>

<style lang="stylus" scoped>
.container
  width: 100%
  h1.topTitle
    text-align: center
</style>